<template>
    <div class="app-container">
        <!-- <el-image src="http://120.78.172.229:28045/group1/M00/00/15/Cl4sW2YYoTGAblDpAAF0sRzFxcs496.jpg"></el-image> -->
        <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
            <el-form-item :label="$t('parameter.settings.userCode')" prop="userCode">
                <el-input v-model="queryParams.userCode" :placeholder="$t('vehicle.journey.placeholder.userCode')" clearable style="width: 240px"
                    @keyup.enter.native="handleQuery" />
            </el-form-item>
            <el-form-item :label="$t('vehicle.vehicle.vehicleNike')" prop="vehicleNike">
                <el-input v-model="queryParams.vehicleNick" :placeholder="$t('vehicle.journey.placeholder.vehicleNick')" clearable style="width: 240px"
                    @keyup.enter.native="handleQuery" />
            </el-form-item>
            <el-form-item :label="$t('vehicle.position.vehicleVinCode')" prop="vehicleVin">
                <el-input v-model="queryParams.vehicleVin" :placeholder="$t('vehicle.journey.placeholder.vehicleVin')" clearable style="width: 240px"
                    @keyup.enter.native="handleQuery" />
            </el-form-item>
            <el-form-item :label="$t('vehicle.position.imei')" prop="IMEI">
                <el-input v-model="queryParams.deviceCode" :placeholder="$t('vehicle.journey.placeholder.imei')" clearable style="width: 240px"
                    @keyup.enter.native="handleQuery" />
            </el-form-item>
            <el-form-item>
                <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">{{$t('common.button.search')}}</el-button>
                <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">{{$t('common.button.refresh')}}</el-button>
            </el-form-item>
        </el-form>


        <el-row :gutter="10" class="mb8">
            <el-col :span="1.5">
                <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport"
                    v-hasPermi="['system:config:export']">{{$t('common.button.export')}}</el-button>
            </el-col>
            <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
        </el-row>
        <el-table v-loading="loading" border :data="configList" @selection-change="handleSelectionChange">
            <el-table-column :label="$t('parameter.settings.userCode')" align="center" prop="userCode" />
            <el-table-column :label="$t('vehicle.vehicle.vehicleNike')" align="center" prop="vehicleNick" :show-overflow-tooltip="true" />
            <el-table-column :label="$t('vehicle.position.vehicleVinCode')" align="center" prop="vehicleVin" :show-overflow-tooltip="true" />
            <el-table-column :label="$t('vehicle.position.imei')" align="center" prop="deviceCode" :show-overflow-tooltip="true" />
            <el-table-column :label="$t('vehicle.journey.totalCount')" align="center" prop="ridingCount" :show-overflow-tooltip="true" />
            <el-table-column :label="$t('vehicle.journey.totalMileage')" align="center" prop="cyclingMileage" :show-overflow-tooltip="true" />
            <el-table-column :label="$t('vehicle.journey.totalHour')" align="center" prop="ridingDuration" :show-overflow-tooltip="true" />
        </el-table>
        <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
            @pagination="getList" />

    </div>
</template>

<script>
import { listUserRiding } from "@/api/vehicle/riding/data";

export default {
    name: "inquiry",
    data() {
        return {
            // 遮罩层
            loading: false,
            // 选中数组
            ids: [],
            // 非单个禁用
            single: true,
            // 非多个禁用
            multiple: true,
            // 显示搜索条件
            showSearch: true,
            // 总条数
            total: 0,
            // 参数表格数据
            configList: [],
            // 弹出层标题
            title: "",
            // 是否显示弹出层
            open: false,
            // 日期范围
            dateRange: [],
            // 查询参数
            queryParams: {
                pageNum: 1,
                pageSize: 10,
                userCode: undefined,
                vehicleNick: undefined,
                vehicleVin: undefined,
                deviceCode: undefined
            },
            // 表单参数
            form: {},
        }
    },
    created() {
        this.getList()
      },
      methods: {
        handleQuery(){
            this.getList();
        },
        resetQuery(){
            this.getList();
        },
        handleExport(){},
        getList(){
            listUserRiding(this.queryParams).then(res =>{
                if (res.code != 200) {
                    this.$message.error(this.$t("common.message.error"));
                }else{
                    this.$message.success(this.$t("common.message.success"))
                    this.configList = res.rows;
                    this.total = res.total;
                }
            })
        },
        handleSelectionChange(){},
      },
}
</script>